<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方向感知图像悬停效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <span></span>
            <div class="imgBx">
                <img src="./static/shu.jpg">
            </div>
            <div class="content">
                <div>
                    <h2>不第后赋菊</h2>
                    <h5>【黄巢】 【唐】</h5>
                    <p>待到秋来九月八，我花开后百花杀。</p>
                    <p>冲天香阵透长安，满城尽带黄金甲。</p>
                </div>
            </div>
        </div>
        <div class="card">
            <span></span>
            <div class="imgBx">
                <img src="./static/hmbb.jpg">
            </div>
            <div class="content">
                <div>
                    <h2>不第后赋菊</h2>
                    <h5>【黄巢】 【唐】</h5>
                    <p>待到秋来九月八，我花开后百花杀。</p>
                    <p>冲天香阵透长安，满城尽带黄金甲。</p>
                </div>
            </div>
        </div>
        <div class="card">
            <span></span>
            <div class="imgBx">
                <img src="./static/mb.jpeg">
            </div>
            <div class="content">
                <div>
                    <h2>不第后赋菊</h2>
                    <h5>【黄巢】 【唐】</h5>
                    <p>待到秋来九月八，我花开后百花杀。</p>
                    <p>冲天香阵透长安，满城尽带黄金甲。</p>
                </div>
            </div>
        </div>
    </div>
    <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
    <script>
        $(document).ready(function() {
            $('.card').on('mouseenter', function(e) {
                x = e.pageX - $(this).offset().left,
                y = e.pageY - $(this).offset().top;
                $(this).find('span').css({top:y, left:x})
            })
        })
        $(document).ready(function() {
            $('.card').on('mouseout', function(e) {
                x = e.pageX - $(this).offset().left,
                y = e.pageY - $(this).offset().top;
                $(this).find('span').css({top:y, left:x})
            })
        })
    </script>
</body>
</html>